<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      header {
        width: 100%;
        height: 60px;
        background-color: burlywood;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      li {
        width: 345px;
        height: 90px;
        border: 1px solid #000;
        margin: 15px;
        list-style: none;
      }
      footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 80px;
        border-top: 1px solid #000;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <!-- 在vue2里面，需要保证每一个组件都只有一个唯一的根元素 -->
    <!-- 在vue3里面不需要了 -->
    <div id="app">
      <div :style="{ fontSize: size + 'px' }">
        <wb-header @big="toBig"></wb-header>
        <wb-content :list="list"></wb-content>
        <wb-form></wb-form>
      </div>
    </div>

    <script src="./lib/Vue3.js"></script>
    <script>
      const { createApp } = Vue;

      const WbButton = {
        props: ["content"],
        template: `
          <button>{{ content }}</button>
        `,
      };

      const WbHeader = {
        data() {
          return {
            fs: 10,
          };
        },
        template: `
          <header>
            微博头部
            <button @click="handleClick">+</button>
          </header>
        `,
        mounted() {
          this.$emit("big", this.fs);
        },
        methods: {
          handleClick() {
            this.fs++;
            this.$emit("big", this.fs);
          },
        },
      };

      const WbContentItem = {
        props: ["item"],
        template: `
          <li>
            <h3>{{ item.title }}</h3>  
            <main>{{ item.content }}</main>
            <wb-button content="👍"></wb-button>
          </li>
        `,
        components: {
          WbButton,
        },
      };

      const WbContent = {
        props: ["list"],
        // 数据要放在父组件的里面
        data() {
          return {};
        },
        template: `
          <ul>
            <wb-content-item v-for="item in list" :key="item.id" :item="item"></wb-content-item>
          </ul>
        `,
        // 组件注册的时候，给谁用就注册在谁身上
        // 在它的父组件上注册的
        components: {
          WbContentItem: WbContentItem,
        },
      };

      const WbForm = {
        template: `
          <footer>
            <input type="text" />
            <wb-button content="发布"></wb-button>
          </footer>
        `,
        components: {
          WbButton,
        },
      };

      // 根组件
      createApp({
        data() {
          return {
            size: 0,
            list: [
              {
                id: 1,
                title: "江苏民企“敢”字当头",
                content: "10天前，我们17万平方米的光伏电板已全部实现并网11",
              },
              {
                id: 2,
                title: "千锋学员“磊”字当头",
                content: "10天前，我们17万平方米的光伏电板已全部实现并网22",
              },
              {
                id: 3,
                title: "33333",
                content: "3333333333333333",
              },
              {
                id: 4,
                title: "4444444",
                content: "444444444444444444444444",
              },
            ],
          };
        },
        methods: {
          toBig(fs) {
            this.size = fs;
          },
        },
        // 注册
        components: {
          WbHeader,
          WbContent,
          WbForm,
        },
      }).mount("#app");
    </script>
  </body>
</html>
